<template>
  <div class="my-container">
    <van-skeleton title avatar :row="2" :loading="loading">
      <van-cell-group>
        <van-cell
          class="base-info"
          center
          :border='false'
        >
          <van-image
            class="avatar"
            slot="icon"
            round
            fit="cover"
            :src="userInfo.avatarUrl"
          />
          <div class="name" slot="title">{{ userInfo.name }}</div>
          <van-button
            class="update-btn"
            size="small"
            round
            to="/user/profile"
          >编辑资料</van-button>
        </van-cell>
      </van-cell-group>
    </van-skeleton>
    <div class="login-btn-wrap">
      <van-button
        class="login-btn"
        type="info"
        block
        @click="logOut"
        :disabled='disabled'
      >退出登录</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyIndex',
  components: {},
  props: {},
  data () {
    return {
      disabled: false,
      loading: true,
      userInfo: {}
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      this.userInfo = this.$store.state.user
      // console.log('userInfo', this.userInfo)
      this.loading = false
    },
    logOut () {
      this.$toast.success('登出成功')
      setTimeout(() => {
        localStorage.clear()
        window.location.reload()
      }, 500)
    }
  }
}
</script>

<style scoped lang="scss">
.base-info {
  box-sizing: border-box;
  height: 115px;
  background-color: unset;
  // padding-top: 38px;
  padding-bottom: 11px;
}
.avatar {
  box-sizing: border-box;
  width: 66px;
  border: 1px solid #fff;
  margin-right: 11px;
}
.name {
  font-size: 15px;
}
.update-btn {
  height: 16px;
  font-size: 10px;
  color: #666;
}
</style>
